<template>
  <div class="app-container">
    <el-form label-position="left" label-width="150px"  style="width: 100%; padding: 0;">
        <el-form-item label="链接过期时间" prop="name">
            <el-date-picker
                v-model="temp.expDatetime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                size="small"
            />
        </el-form-item>
        <el-form-item label="附加数据" prop="expand">
            <el-input
                v-model="temp.expandData"
                type="textarea"
                :rows="4"
                size="small"
                placeholder="必须是json结构,一般是将用户的身份信息填写进token,防止伪造身份信息，如员工编号：{'employerNo':'11111'}，然后将生成的链接发送给员工填写提交，后端会自动将employerNo作为属性存入数据库"
            />
        </el-form-item>
    </el-form>

    <br/>
    <el-button type="plain"  size="mini" @click="createShareLink">
      生成链接
    </el-button>
    <br/>
    <br/>
      <a :href="link" target="_blank">{{link}}</a>
    <br/>
    <br/>
    <el-button v-if="link" type="plain"  size="mini"
             v-clipboard:copy="copyLink(link)"
             v-clipboard:success="copyLinkSuccess"
             v-clipboard:error="copyLinkError">
      复制链接
    </el-button>
  </div>
</template>

<script>
import {createShareJwt} from './api'
// 导入多选项组件

export default {
    name: 'FormShareLink',
    components: {},
    props: {
        row: {}
    },
    data() {
        return {
            temp:{
                expDatetime:undefined,
                expandData:undefined,
            },
            link: undefined,
            shareLinkPrefix: process.env.VUE_APP_SHARE_LINK_PREFIX
        }
    },
    watch: {
        'row': {
            immediate: true, // vue首次赋值不触发watch的解决方法
            handler: function(nval, oval){
                if (oval && nval.id==oval.id) {
                    return
                }
                this.clear()
            }
        }
    },
    methods: {
        clear() {
            this.link = undefined
            this.temp.expDatetime=undefined
            this.temp.expandData=undefined
        },
        createShareLink() {
            const data = Object.assign({}, this.temp)
            data.dynamicFormId = this.row.id
            createShareJwt(data).then(r=>{
                if (!r.success) {
                    this.link = r.content
                    return
                }
                const jwt = r.remark
                this.link = this.shareLinkPrefix+jwt;
            })
        },

        // copy link
        copyLink(link) {
            return link;
        },
        copyLinkSuccess () {
            this.$message({
                message: '复制成功',
                type: 'success'
            });
        },
        copyLinkError () {
            this.$message.error("复制失败");
        },
    }

}
</script>
<style>

</style>
